<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/x-loading.css">
</head>

<body>
    <div id="loginApp">


        <div v-if="!visible">

            <h1>
                用户登录

            </h1>
            <div>
                账号：<input type="text" v-model="loginUser.u_id" />
            </div>
            <div>
                密码：<input type="password" v-model="loginUser.u_pwd" />
            </div>

            <div>
                <button type="button" @click="login">登录</button>
                <a href="#" @click="toRegister">注册</a>
            </div>
        </div>

        <div v-if="visible">

            <h1>
                用户注册
                <span @click="visible=false;"
                    style="display: inline-block;padding-left:20px;font-size:14px;color:#999999;cursor:pointer;">返回登录</span>
            </h1>
            <div>
                账号：<input type="text" v-model="newUser.u_id" />
            </div>
            <div>
                密码：<input type="password" v-model="newUser.u_pwd" />
            </div>
            <div>
                确认密码：<input type="password" v-model="newUser.u_pwd2" />
            </div>
            <div>
                姓名：<input type="text" v-model="newUser.u_name" />
            </div>
            <div>
                <button type="button" @click="addUser">提交</button>
            </div>
        </div>

    </div>

    <script src="js/vue.global.js"></script>
    <script src="js/axios.min.js"></script>
    <script src="js/sweetalert2.all.min.js"></script>
    <script src="js/x-loading.js"></script>


    <script src="js/my.js"></script>
    <script>
        const cfg = {
            setup() {



                const newUser = Vue.reactive({
                    u_id: '',
                    u_pwd: '',
                    u_pwd2: '',
                    u_name: ''
                });

                const addUser = () => {

                    ajax(
                        myAxios.post('/user', newUser),
                        result=>{
                            visible.value = false;//显示登录
                        },
                        '注册成功！请登录。'
                    );

                    
                };

                const visible = Vue.ref(false);

                const toRegister = () => {
                    visible.value = true;
                }


                //登录
                const loginUser = Vue.reactive({
                    u_id: '',
                    u_pwd: ''
                });

                const login = () => {

                    ajax(
                        myAxios.post('/user/login', loginUser),
                        (result)=>{
                            localStorage.setItem('Token',result.data);//存储token
                            window.location.href='emp.html';
                        },
                        "登录成功！"
                    );
                   
                };

                return {
                    visible,
                    newUser,
                    addUser,
                    toRegister,
                    loginUser,
                    login
                };

            }
        };
        Vue.createApp(cfg).mount('#loginApp');
    </script>
</body>

</html>